@charset "utf-8";
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#web{
    width: 100%; 
    height: 100%;
    position: relative;
    
    
}
.bigbg{
     margin:0 auto;
     width: 100%;
    height: 100%;
     z-index: 0;
}
.bg1{
     z-index: 1;
    background: #17ee2e;
    width: 25%;
    height: 100%;
    float: left; 
     opacity: 0;
      //animation: bg1 1s linear 1s 1 normal forwards;
}


.bg2{
     z-index: 2;
    background: #17ee2e;
    width: 25%;
    height: 100%;
    float: left; 
     opacity: 0;
    
     // animation: bg1 1s linear 900ms 1 normal forwards;
}

.bg3{
     z-index: 3;
    background: #17ee2e;
    width: 25%;
    height: 100%;
    float: left; 
     opacity: 0;
     // animation: bg1 1s linear 700ms 1 normal forwards;
}

.bg4{
     z-index: 4;
    background: #17ee2e;
    width: 25%;
    height: 100%;
    float: left; 
     opacity: 0;
     // animation: bg1 1s linear 500ms 1 normal forwards;
}

//.bg5{
//  background: #17ee2e;
//  width: 20%;
//  height: 100%;
//  float: left; 
//   opacity: 0;
//    animation: bg1 1s linear 300ms 1 normal forwards;
//}

.onepicture{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    top: -42.5px;
    left: -111px;
    
//   animation: img1 1s linear 300ms infinite normal forwards;
.img1{
    display: block;
    width: 700px;
    height: 623px;
    margin-left: 0px;
    margin-top: 0px;
//  position: absolute;
//  z-index: 5;
    opacity: 0;
   //animation: img1 4s linear 2s infinite normal forwards;
}
}

.black{
    position: absolute;
    z-index: 6;
    opacity: 1;
    width: 547px;
    height: 122px;
    top: 312px;
    left: -243px;
    background: green;
    transform: scaleX(0);
    opacity: 0;
    //display: block;
    //animation: black 3s ease-out 1.1s 1 normal forwards;
}

.yellowpic{
    position: absolute;
    z-index: 7;
    opacity: 1;
    width: 753px;
    height: 506px;
    top: 160px;
    
    left: -112.5px;
   overflow: hidden;
    transform: rotateZ(0deg);
    //display: block;
      img{
          opacity: 0;
           width: 753px;
          height: 600px;
         // animation: black1 3s ease-out 1.2s 1 normal forwards;
      }
}

.ball{
     position: absolute;
    z-index: 8;
    opacity: 1;
   width: 365px;
    height: 365px;
    //opacity: 0;
   // border: 1px solid black;
    top: 300px;
    left: 19px;
    overflow: hidden;
    //display: block;
      img{
          opacity: 0;
           width: 500px;
          height: 500px;
         // animation: black2 2s linear 2s infinite normal forwards;
      }

}


.twopic{
   position: absolute;
    width: 500px;
    height: 100px;
    z-index: 11;
    opacity: 0;
    top: 530px;
    left: -60px;
     transform-origin: left;
    transform: rotateZ(0deg);
    background: gainsboro;
    //animation: bg01 1s linear 3s 1 normal forwards;
    img{
         position: absolute;
         top: -72px;
         left: 55px;
         opacity: 0;
          //width: 200px;
          //height: 100px;
          transform-origin: center ; 
         transform: rotateZ(10deg);
//       animation: text01 .5s linear 6s 1 normal forwards,
//       text02 .5s linear 6s infinite normal forwards;
    }
}

.renxiang{
    position: absolute;
    width: 308px;
     height: 485px;
    //transform-origin: center;
    z-index: 9;
    opacity: 0;
    top: 119px;
    left: 81px;
// animation:rx1 0.5s 1 4s normal forwards,
//  rx2 0.5s 4 4.5s normal forwards; 
   
}

.top-pic{
     position: absolute;
    z-index: 8;
    opacity: 0;
    top: 73px;
    left: 13px;
   // animation:rio1 0.5s 1 6s normal forwards;
}
.wz{
    position: absolute;
    z-index: 9;
    opacity: 1; 
    top: 350px;
    left: 19px;
    width: 300px;
    height: 300px;
    .wz1{
        font-size: 24px;
        font-weight: 700;
        color: #2196f3;
        opacity: 0; 
//      animation:wz1 0.5s 1 6s normal forwards,
//      wz2 0.5s 1 6.5s normal forwards;
    }
    
    .wz2{
        font-size: 18px;
        font-weight: 700; 
         color: #2196f3;
         opacity: 0; 
         //transform-origin: center;
//       animation:wz1 0.5s 1 6s normal forwards,
//       wz2 0.5s 1 6.5s normal forwards;
    }
}
@keyframes wz1{
    //代表动画的进度
   0%{
       transform: translateX(-100%);
       opacity: 1;
    }
    100%{
       transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes wz2{
    //代表动画的进度
   0%{
       transform: scale(0.5) rotateZ(0deg);
       opacity: 1;
    }
     20%{
       transform: scale(0.8) rotateZ(-2deg);
       opacity: 1;
    }
     80%{
       transform: scale(0.8) rotateZ(-2deg);
       opacity: 1;
    }
    100%{
       transform: scale(1.0) rotateZ(0deg);
        opacity: 1;
    }
}

@keyframes rio1{
    //代表动画的进度
   0%{
       transform: translateY(-100%);
       opacity: 1;
    }
    100%{
       transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes rx1{
    //代表动画的进度
   0%{
       transform: translateY(100%);
       opacity: 0;
    }
    100%{
       transform: translateY(0%);
        opacity: 1;
    }
}


@keyframes rx2{
    //代表动画的进度
    0%{
      
       transform: rotateZ(0deg);
       //transform-origin: center ; 
       opacity: 1;
    }
    10%{
        transform: rotateZ(5deg); 
    }
    20%{
        transform: rotateZ(8deg); 
    }
    50%{
        transform: rotateZ(10deg);  
    }
    70%{
      transform: rotateZ(-8deg);  
    }
    90%{
      transform: rotateZ(-5deg);  
    }
    100%{
        transform: rotateZ(0deg) ;
        opacity: 1;
    }
}
@keyframes text01{
    //代表动画的进度
  0%{
       transform: translateY(100%);
       opacity: 0;
    }
    100%{
       transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes text02{
    //代表动画的进度
    0%{
      
       transform: rotateZ(10deg) scale(1.0);
       //transform-origin: center ; 
       opacity: 1;
    }
    33%{
        transform: rotateZ(15deg) scale(1.0); 
    }
    66%{
        transform: rotateZ(20deg) scale(0.9);  
    }
    88%{
        transform: rotateZ(10deg) scale(0.9);  
    }
    100%{
        transform: rotateZ(10deg) scale(1.0);
        opacity: 1;
    }
}

@keyframes bg01{
    //代表动画的进度
    0%{
      
       transform:rotateZ(-5deg) scaleX(0);
      
       opacity: 1;
    }
    100%{
        transform:rotateZ(-5deg) scaleX(1.1);
        opacity: 1;
    }
}
@keyframes black2{
    //代表动画的进度
    0%{
     // transform:rotate(360deg);
        opacity: 1;
    }
    100%{
      transform:rotate(360deg);
        opacity: 1;
    }
}
@keyframes black1{
    //代表动画的进度
   0%{
      
       transform: scaleX(1.1);
       opacity: 0;
    }
    33%{
         transform: scaleX(1.0);
    }
    66%{
        transform: scaleX(0.8);
    }
    100%{
      transform:scaleX(1.0);
        opacity: 1;
    }
}
@keyframes black{
    //代表动画的进度
    0%{
      
       transform:rotateZ(-30deg) scaleX(1.2);
    }
    33%{
         transform:rotateZ(-30deg) scaleX(1.0);
    }
    66%{
        transform:rotateZ(-30deg) scaleX(0.8);
    }
    100%{
      transform:rotateZ(-30deg) scaleX(1.0);
        opacity: 1;
    }
}

@keyframes img1{
    //代表动画的进度
    0%{
      
       opacity: 1;
    }
    100%{
      transform:  rotate(360deg);
        opacity: 1;
    }
}

@keyframes bg1{
    //代表动画的进度
    0%{
       transform: translateY(-100%);
       opacity: 0;
    }
    100%{
       transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes bg2{
    //代表动画的进度
    0%{
       transform: translateY(-100%);
       opacity: 0;
    }
    100%{
       transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes bg3{
    //代表动画的进度
    0%{
       transform: translateY(-100%);
       opacity: 0;
    }
    100%{
       transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes bg4{
    //代表动画的进度
    0%{
       transform: translateY(-100%);
       opacity: 0;
    }
    100%{
       transform: translateY(0%);
        opacity: 1;
    }
}
//@keyframes bg5{
//  //代表动画的进度
//  0%{
//     transform: translateY(-100%);
//     opacity: 0;
//  }
//  100%{
//     transform: translateY(0%);
//      opacity: 1;
//  }
//}

.page1.active{
    .bg1{
   
      animation: bg1 1s linear 1s 1 normal forwards;
}


.bg2{
   
    
      animation: bg1 1s linear 900ms 1 normal forwards;
}

.bg3{
    
      animation: bg1 1s linear 700ms 1 normal forwards;
}

.bg4{
    
      animation: bg1 1s linear 500ms 1 normal forwards;
}



.onepicture{

.img1{
  
   animation: img1 4s linear 2s infinite normal forwards;
}
}

.black{

    animation: black 3s ease-out 1.1s 1 normal forwards;
}

.yellowpic{
   
      img{
        
          animation: black1 3s ease-out 1.2s 1 normal forwards;
      }
}

.ball{
  
      img{
          
          animation: black2 2s linear 2s infinite normal forwards;
      }

}


.twopic{

    animation: bg01 1s linear 3s 1 normal forwards;
    img{
      
         animation: text01 .5s linear 6s 1 normal forwards,
         text02 .5s linear 6s infinite normal forwards;
    }
}

.renxiang{
  
   animation:rx1 0.5s 1 4s normal forwards,
    rx2 0.5s 4 4.5s normal forwards; 
   
}

.top-pic{
   
    animation:rio1 0.5s 1 6s normal forwards;
}
.wz{
 
    .wz1{
      
        animation:wz1 0.5s 1 6s normal forwards,
        wz2 0.5s 1 6.5s normal forwards;
    }
    
    .wz2{
         animation:wz1 0.5s 1 6s normal forwards,
         wz2 0.5s 1 6.5s normal forwards;
    }
}
}
//第二屏
.page2{
    background: url(../img/20.gif);
    background-size: 100%;
   
}
.yuan1{
   position: absolute;
    z-index: 1;
    opacity: 1;
    top: 114px;
    left: 126px;
    img{
        height: 420px;
        width: 448px;
       // animation:yuan 3.5s linear 6s infinite normal forwards, 
    }
    
}



.yuan2{
   position: absolute;
   z-index: 0;
    opacity: 1;
    top: 132px;
    left: 61px;
     img{
        height: 420px;
        width: 448px;
        //animation:yuan 12s linear 6s infinite normal forwards; 
    }
}

@keyframes yuan{
    //代表动画的进度
    0%{
       //transform: rotate(360deg);
       opacity: 1;
    }
    100%{
       transform: rotate(360deg);
        opacity: 1;
    }
}
.yuan3{
    position: absolute;
     z-index: 4;
    width: 400px;
    height: 400px;
    opacity: 0;
    top: 41px;
    left: -199px;
    background: rgb(38,133,146);
    border-radius: 400px;
    
   // animation:yuan1 1s linear 6s 2 normal forwards; 
}
.yuan4{
   position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 400px;
    top: 37px;
    background: yellow;
    z-index:5;
    left: -203px;
    opacity: 0;
     //animation:yuan1 1s linear 8s 2 normal forwards; 
}
.text3{
     position: absolute; 
      z-index:3;   
    width: 200px;
    height: 400px;
  
    top: 264px;
    left: 0px;
   overflow: hidden;
}
 .text4{ 
      position: absolute;
        z-index: 6;
        opacity: 0;
        line-height: 30px;
        font-size: 12px;
        color: #03a9f4;
        top: 120px;
        left: 10px;
        overflow: hidden;
        .li1{
            margin-left: 54px;
        }
        // animation:t1 1s linear 8s 1 normal forwards;  
    }
    
@keyframes yuan1{
    0%{
       transform:scale(1.0);
       opacity: 1;
    }
     20%{
       transform:scale(0.9);
       opacity: 1;
    }
     50%{
       transform:scale(1.0);
       opacity: 1;
    }
    80%{
       transform:scale(0.9);
       opacity: 1;
    }
    100%{
       transform:scale(1.0);
        opacity: 1;
    }
}
@keyframes t1{
     0%{
       transform: translateX(-100%);
       opacity: 1;
    }
    100%{
       transform: translateX(0%);
        opacity: 1;
    }
}
.text5{
     position: absolute; 
      z-index:7;   
    width: 100%;
    height: 400px;
    top: 35px;
    left: 0px;
    
    .p1{
        position: absolute; 
        z-index:9;   
        font-size: 50px;
        font-weight: 900;
        color: white;
        top:39px;
        left: 34px;
         opacity: 0;
       // animation:qq1 1s linear 8s 1 normal forwards;  
    }
    
    .p2{
         position: absolute; 
         z-index:8;   
        font-size: 50px;
        font-weight: 900;
        color: #268592;
        top:63px;
        left: 10px;
         opacity: 0;
       // animation:qq1 1s linear 8s 1 normal forwards;  
    }
    
    .p3{
        position: absolute; 
        z-index:9;   
        font-size: 20px;
        font-weight: 900;
        color: white;
        top:50px;
        left:189px;
         opacity: 0;
        //animation:qq1 1s linear 8.5s 1 normal forwards;  
    }
    
    .p4{
         position: absolute; 
         z-index:8;   
        font-size: 20px;
        font-weight: 900;
        color: #268592;
        top:75px;
        left:  162px;
         opacity: 0;
        //animation:qq1 1s linear 8.5s 1 normal forwards;  
    }
    
    .p5{
        position: absolute; 
        z-index:9;   
        font-size: 26px;
        font-weight: 900;
        color: white;
        top:147px;
        left:38px;
        //animation:qq1 1s linear 8s 1 normal forwards;  
    }
    
    .p6{
         position: absolute; 
         z-index:8;   
        font-size: 26px;
        font-weight: 900;
        color: #268592;
        top:185px;
        left:  5px;
        //animation:qq1 1s linear 8s 1 normal forwards;  
    }
}
@keyframes qq1{
     0%{
     
       opacity: 0;
    }
    100%{
     
        opacity: 1;
    }
}


.page2.active{
    .yuan1{
    img{
       
        animation:yuan 3.5s linear 3s infinite normal forwards, 
    }
    
}



.yuan2{

     img{
       
        animation:yuan 12s linear 3s infinite normal forwards; 
    }
}

.yuan3{
 
    animation:yuan1 1s linear 3s 2 normal forwards; 
}
.yuan4{
 
     animation:yuan1 1s linear 4s 2 normal forwards; 
}


 .text4{ 

         animation:t1 1s linear 4s 1 normal forwards;  
    }
    

.text5{

    
    .p1{
    
        animation:qq1 1s linear 4s 1 normal forwards;  
    }
    
    .p2{

        animation:qq1 1s linear 4s 1 normal forwards;  
    }
    
    .p3{
    
        animation:qq1 1s linear 4.5s 1 normal forwards;  
    }
    
    .p4{
       
        animation:qq1 1s linear 4.5s 1 normal forwards;  
    }
    
    .p5{
     
        animation:qq1 1s linear 4s 1 normal forwards;  
    }
    
    .p6{
   
        animation:qq1 1s linear 4s 1 normal forwards;  
    }
}
}

//第三屏

.onefencing{
    position: absolute;
//  background: url(../img/27.png);
//   background-size: 100%;
    left: -312px;
    top: 0;
    z-index: 2;

}

.twofencing{
    position: absolute;
    top:281px;
    left: -25px;
    z-index: 2;
}

.fencing-yellow{
    position: absolute;
    top:0px;
    left: 0px;
    z-index: 1;
    width: 100px;
    opacity: 0;
    //border: 1px solid black;
    border-bottom: 667px solid yellow;            
    border-left: 0px solid transparent; 
    border-right: 50px solid transparent;       
      
}

.fencing-blue{
    position: absolute;
    top:0px;
    left: 0px;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: deepskyblue;
}
.fencing3{
    position: absolute;
//  background: url(../img/27.png);
//   background-size: 100%;
    left: -312px;
    top: 0;
    z-index: 3;
    opacity: 0;
}

.fencing4{
    position: absolute;
    top:249px;
    left: -25px;
    z-index: 3;
    opacity: 0;
}
.fencing-text{
    position: absolute;
    top:0px;
    left: 0px;
    z-index: 4;
    opacity: 1;
    width: 100%;
    height: 400px;
    
    .fencing5{
         position: absolute;
         top:35px;
         left: 0px;
         z-index: 4;
         opacity: 0;
       width: 100%;
       height: 100px; 
       
    }
    .fencing6,.fencing7,.fencing8{
         position: absolute;
         top:35px;
         left: 0px;
         z-index: 4;
         opacity: 0;
       width: 100%;
       height: 100px; 
       
    }
    .fencing-txt{
         position: absolute;
        top:51px;
        left: 120px;
        z-index: 5;
        opacity: 0;
        font-size: 14px;
       color: white;
       line-height: 30px;
    }
}

.fencing-text1{
     position: absolute;
        top:506px;
        left: 19px;
        z-index: 5;
        opacity: 0;
        //font-size: 14px;
        //font-weight: 800;
     
       .fencing-p1{
           font-size: 40px;
          font-weight: 800;
          color: white;
         line-height: 30px;
         margin-bottom: 10px;
         
       }
       .fencing-p2{
           font-size: 24px;
        font-weight: 800;
          color: white;
       line-height: 30px;
       }
}
@keyframes f1{
     0%{
        transform: translateY(-100%);
       opacity: 0;
    }
    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes f2{
     0%{
       opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes f3{
     0%{
       opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes f4{
     0%{
         transform: translateX(100%); 
       opacity: 0;
    }
    100%{
        transform: translateX(0%); 
        opacity: 1;
    }
}

@keyframes f5{
     0%{
        transform: translateY(100%);
       opacity: 0;
    }
    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}
.page3.active{
   .fencing-yellow{
       animation:f1 0.8s linear 1s 1 normal forwards;
   } 
   .fencing-blue{
       animation:f1 1.4s linear 1.4s 1 normal forwards;
   }
   .onefencing{
       animation:f2 1s linear 2s 1 normal forwards;
   }
   .twofencing{
       animation:f2 1s linear 2.5s 1 normal forwards;
   }
   .fencing3,.fencing4{
       animation:f3 1s linear 2.5s 1 normal forwards;
   }
   .fencing5,.fencing-txt{
       animation:f4 1s linear 2.8s 1 normal forwards;
   }
   .fencing6{
       animation:f4 800ms linear 4s infinite normal forwards;
   }
   .fencing7{
       animation:f4 800ms linear 4.2s infinite normal forwards;
   }
   .fencing8{
       animation:f4 800ms linear 4.4s infinite normal forwards;
   }
   .fencing-text1{
       animation:f5 1s linear 3s 1 normal forwards;
   }
}

//第四屏
.gymnastics{
     position: absolute;
        top:466px;
        left: 40px;
        z-index: 1;
        opacity: 1;
}
.gy1{
     position: absolute;
        top:0px;
        left: 0px;
        z-index: 1;
        opacity: 1;
    width: 100%;
}
.gy-bg1{
    position: absolute;
        top:0px;
        left: 0px;
        z-index: 0;
        opacity: 0;
    
       border-top: 406px solid #2196F3;
    border-left: 377px solid transparent;
}
.gy-bg2{
    position: absolute;
    top: 206px;
    left: -323px;
    z-index: 0;
    opacity: 0;
    width: 938px;
    height: 421px;
    transform: rotate(47deg);
    background-color: #4df191;
    margin: 50px auto;
}
.gy-bg3{
    position: absolute;
        top:265px;
        left: 0px;
        z-index: 0;
        opacity: 0;
     border-bottom: 406px solid yellow;
     border-right:377px solid transparent;
    
}
.gy01{
    position: absolute;
        top:117px;
        left: 84px;
        z-index: 1;
     
        transition: all 3s linear;
//      transform: translateX(0) rotateZ(360deg);
        
//      transform: rotateZ(30deg);
//           animation:gy3 1s linear 1s 1 normal forwards;
}


@keyframes gy3{
    50%{
        transform: translateX(0) rotateZ(30deg);
    }
    100%{
        transform: translateX(0) rotateZ(360deg);
         opacity: 1;
    }
}
.gymnastics3{
    position: absolute;
        top:117px;
        left: 84px;
        z-index: 1;
    transform: translateX(-362px);
    
}
.gymnastics2{
    position: absolute;
        top:117px;
        left: 84px;
        z-index: 2;
        opacity: 0;
        transform-origin: left bottom;
        transform: rotateZ(-60deg);
       //animation:gy7 500ms linear 3.5s infinite normal forwards;
}

@keyframes gy7{
    20%{
        transform: rotateZ(-60deg);
        opacity: 1;
    }
    40%{
        transform: rotateZ(-55deg);
        opacity: 1;
    }
    60%{
        transform: rotateZ(-45deg);
        opacity: 1;
    }
    80%{
        transform: rotateZ(-15deg);
        opacity: 1;
    }
    100%{
        transform:  rotateZ(0deg);
         opacity: 1;
    }
}
.gymnastics1{
     position: absolute;
        top:128px;
        left: 40px;
        z-index: 2;
        opacity: 0;
}

@keyframes gy1{
     0%{
         transform:translateX(100%);
       opacity: 1;
    }
   
     100%{
        transform:translateX(0%);
        opacity:1;
    }
}
@keyframes gy2{
     0%{
         transform: rotate(47deg) translateX(-100%);
       opacity: 1;
    }
   
     100%{
        transform:rotate(47deg) translateX(0%);
        opacity:1;
    }
}
@keyframes gy4{
     0%{
         transform:translateX(-100%);
       opacity: 1;
    }
   
     100%{
        transform:translateX(0%);
        opacity:1;
    }
}
@keyframes gy5{
     0%{
        
       opacity: 1;
    }
   
     100%{
  
        opacity:0;
    }
}
@keyframes gy6{
     0%{
        transform: scale(1.2);
       opacity: 1;
    }
     50%{
         transform: scale(0.9);
        opacity:1;
    }
     100%{
         transform: scale(1);
        opacity:1;
    }
}

.gy-text{
    font-size: 14px;
    color: white;
    position: absolute;
        top:71px;
        left: 18px;
        z-index: 3;
        opacity: 0;
        line-height: 30px;
        width: 250px;
        height: 400px;
}
.gy-text1{
        position: absolute;
        top:534px;
        left: 62px;
        z-index: 3;
        opacity: 0;
        width: 300px;
        height: 100px;
        .gy-t1{
           
            font-size: 40px;
            color: white;
            font-weight: 700;
            //line-height: 30px; 
            margin-bottom: 4px;
        }
        
        .gy-t2{
            width: 300px;
            font-size: 24px;
            color: white;
            font-weight: 700;
            //line-height: 30px; 
        }
}

@keyframes gy8{
      0%{
         transform:translateX(-100%);
       opacity: 1;
    }
   
     100%{
        transform:translateX(0%);
        opacity:1;
    }
}
@keyframes gy9{
      0%{
         transform:translateY(100%);
       opacity: 1;
    }
   
     100%{
        transform:translateY(0%);
        opacity:1;
    }
}
.page4.active{
    .gy1{
        animation:gy5 500ms linear 3.5s 1 normal forwards;
    }
    .gy01{
         animation:gy3 500ms linear 1s 1 normal forwards;
    }
    .gy-bg1{
       animation:gy1 0.9s linear 1.8s 1 normal forwards; 
    }
    .gy-bg2{
         animation:gy2 1s linear 2.4s 1 normal forwards;
    }
    .gy-bg3{
        animation:gy4 1s linear 2.6s 1 normal forwards;
    }
    .gymnastics1{
        animation:gy6 1s linear 3.7s 2 normal forwards;
    }
    .gymnastics2{
        animation:gy7 1s linear 4s infinite normal forwards;
    }
    .gy-text{

        animation:gy8 1s linear 4.5s 1 normal forwards; 
   
    }
    .gy-text1{
        animation:gy9 1s linear 4.5s 1 normal forwards;
    }
    
}
//第五屏
.page5{
    background: yellow;
}

.shooting{
        position: absolute;
        top:175px;
        left: 75px;
        z-index: 1;
        opacity: 0;
}
.shooting1{
        position: absolute;
        top:175px;
        left: 75px;
        z-index: 1;
        opacity: 0;
}
.shooting2{
        position: absolute;
        top: 341px;
        left: 222px;
        z-index: 1;
        opacity: 0;
}

.shooting3{
        position: absolute;
        top:175px;
        left: 75px;
        z-index: 1;
        opacity: 0;
}
.shooting4{
    position: absolute;
    top: 133px;
    left: -11px;
    z-index: 0;
    opacity: 0;
}
.shooting5{
    position: absolute;
    top: 133px;
    left: -26px;
    z-index: 0;
    opacity: 0;
}
.shooting6{
    position: absolute;
    top: 148px;
    left: -50px;
    z-index: 0;
    opacity: 0;
}
.shooting7{
    position: absolute;
    top: 176px;
    left: -78px;
    z-index: 0;
    opacity: 0;
}
.shooting8{
    position: absolute;
    top: 284px;
    left: 60px;
    z-index: 0;
    opacity: 0;
}
.shooting9{
position: absolute;
    top: -172px;
    left: 0px;
    z-index: 2;
    opacity: 0;
    transform: rotate(90deg);
    width: 237px;
    border-bottom: 655px solid #2196F3;
    border-left: 0px solid transparent;
    border-right: 90px solid transparent;
 
}
.shooting10{
position: absolute;
         top: 259px;
    left: -13px;
    z-index: 2;
    opacity: 0;
    /* width: 600px; */
    transform: rotate(-98deg);
    border-bottom: 6px solid black;
    border-left: 566px solid transparent;
    border-right: 0px solid transparent;
}

.shooting-text{
   position: absolute;
   top: 40px;
    left: 30px;
    z-index: 2;
    opacity: 0;
    width: 300px;
    height: 400px;
   color: white;
   line-height: 30px;
   font-size: 18px;
  
}.shooting-text1{
   position: absolute;
   top: 520px;
    left: 30px;
    z-index: 2;
    opacity: 0; 
    width: 400px;
    height: 100px;
    .shooting-textp1{
       color: deepskyblue;
      font-size: 40px; 
      margin-bottom: 5px;
       font-weight: 800;
    }
    .shooting-textp2{
        font-size: 26px; 
        font-weight: 800;
        color: white;
    }
}
@keyframes sh1{
      0%{
         transform:translateX(100%);
       opacity: 1;
    }
   
     100%{
        transform:translateX(0%);
        opacity:1;
    }
}
@keyframes sh2{
      0%{
         transform:translateX(-100%);
       opacity: 1;
    }
   
     100%{
        transform:translateX(0%);
        opacity:1;
    }
}
@keyframes sh3{
      0%{
         transform:scale(1.1);
       opacity: 1;
    }
      50%{
         transform:scale(1.0);
       opacity: 1;
    }
     100%{
        transform:scale(1.1);
        opacity:1;
    }
}
@keyframes sh4{
      0%{
         transform:rotate(90deg) translateX(-100%);
       opacity: 1;
    }
   
     100%{
        transform:rotate(90deg) translateX(0%);
        opacity:1;
    }
}
@keyframes sh5{
      0%{
         transform: translateY(-100%);
       opacity: 1;
    }
   
     100%{
        transform: translateY(0%);
        opacity:1;
    }
}
@keyframes sh6{
      0%{
         transform: translateY(100%);
       opacity: 1;
    }
   
     100%{
        transform: translateY(0%);
        opacity:1;
    }
}
.page5.active{
    .shooting{
     animation:sh1 1s linear 1s 1 normal forwards;
        
    }
     .shooting1{
     animation:sh1 1s linear 1.2s 1 normal forwards;
        
    }
     .shooting2{
     animation:sh1 1s linear 1.4s 1 normal forwards;
        
    }
    .shooting3{
     animation:sh1 1s linear 1.5s 1 normal forwards;
        
    }
    .shooting4{
     animation:sh2 1s linear 1s 1 normal forwards;
        
    }
    .shooting5{
     animation:sh2 1s linear 1.2s 1 normal forwards;
        
    }
    .shooting6{
     animation:sh2 1s linear 1.4s 1 normal forwards;
        
    }
    .shooting7{
     animation:sh2 1s linear 1.6s 1 normal forwards;
        
    }
    .shooting8{
     animation:sh2 1s linear 1.8s 1 normal forwards,
     sh3 0.5s linear 2s infinite normal forwards,;
        
    }
    .shooting9{
     animation:sh4 1s linear 2.2s 1 normal forwards;
        
    }
    .shooting-text{
     animation:sh5 1s linear 2.2s 1 normal forwards;
        
    }
    .shooting-text1{
     animation:sh6 1s linear 2.2s 1 normal forwards;
        
    }
}

//第六屏
//.page6{
////  background: url(../img/31.png);
////  background-size: 100%;
//}

.page6-one{
    position: absolute;
    top: 0;
    left: -122px;
    width: 500px;
    height: 500px;
    z-index: 0;
    img{
        width: 100%;
    }
}

.page6-top{
    position: absolute;
      top: 138px;
    left: 161px;
    width: 200px;
    height: 50px;
    font-size: 30px;
    font-weight: 700;
    color: white;
    text-align: center;
    line-height: 40px;
    background: steelblue;
    z-index: 1;
    opacity: 0;
}

.page6-text{
    position: absolute;
    top: 439px;
    left: 59px;
    width: 200px;
    height: 200px;
    font-size: 30px;
    color: deepskyblue;
    text-align: left;
    line-height: 40px;
    opacity:0;
}

@keyframes page6-top1{
      0%{
         transform: translateX(100%);
       opacity: 1;
    }
   
     100%{
        transform: translateX(0%);
        opacity:1;
    }
}
@keyframes page6-text1{
      0%{
         transform: translateY(100%);
       opacity: 1;
    }
   
     100%{
        transform: translateY(0%);
        opacity:1;
    }
}
.page6.active{
    .page6-top{
     animation:page6-top1 1s linear 1.5s 1 normal forwards;
          
    }
    .page6-text{
     animation:page6-text1 1s linear 1.5s 1 normal forwards;
        
    }
    
}

//第七屏
.page7{
    background: url(../img/17.jpg);
}

.page7-text{
    position: absolute;
    top: 353px;
    left: 0px;
    opacity: 1;
    z-index: 1;
    width: 500px;
       height: 52px;
    padding: 5px 5px;
    background: ghostwhite;
    .page7-left{
        width: 100px;
        height: 50px;
        background: #f6a219;
        left: 0;
        p{
            font-size: 18px;
            color: white;
            line-height: 46px;
            text-align: center;
        }
    }
    .page7-p{
        margin-left: 121px;
        margin-top: -31px;
        color: gray;
        font-size: 16px;
    }
}

.page7-map{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 415px;
    left: 0px;
    opacity: 1;
    z-index: 1;
}
@keyframes page7-left1{
    //代表动画的进度
    0%{
      
       transform: rotateZ(0deg) scale(1.0);
       //transform-origin: center ; 
       opacity: 1;
    }
    33%{
        transform: rotateZ(15deg) scale(1.0); 
    }
    66%{
        transform: rotateZ(20deg) scale(0.9);  
    }
    88%{
        transform: rotateZ(10deg) scale(0.9);  
    }
    100%{
        transform: rotateZ(0deg) scale(1.0);
        opacity: 1;
    }
}
.page7.active{
    .page7-left{
     animation:page7-left1 1.5s linear 1s infinite normal forwards;
        
    }
}

//.page8{
//  background: url(../img/6.jpg);
//  background-position: 100% 100%;
//}

.page8-bg{
     position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
    z-index: 0;
    width: 100%;
    height: 100%;
    img{
        width: 100%;
        height: 700px;
    }
}

.page8-img1{
    position: absolute;
        top: 85px;
    left: 41px;
    opacity: 1;
    z-index: 1;
    background: white;
    width: 120px;
    height: 120px;
    border: 1px solid salmon;
    img{
        width: 100%;
    }
}
.page8-img2{
    position: absolute;
   top: 46px;
    left: 189px;
    opacity: 1;
    z-index: 1;
     background: white;
    width: 120px;
    height: 100px;
    border: 1px solid salmon;
     img{
        width: 100%;
    }
}
.page8-img3{
    position: absolute;
     top: 193px;
    left: 189px;
    opacity: 1;
    z-index: 1;
    width: 120px;
    height: 120px;
    border: 1px solid salmon;
     img{
        width: 100%;
    }
}

.te{
    position: absolute;
     top: 254px;
    left: 26px;
    opacity: 1;
    z-index: 1;
    font-size: 30px;
    font-weight: 700;
    color: white;
}

@keyframes page8-img{
      0%{
         transform: rotate(-30deg);
       opacity: 1;
    }
     15%{
         transform: rotate(-15deg);
       opacity: 1;
    }
     50%{
         transform: rotate(0deg);
       opacity: 1;
      }
      75%{
         transform: rotate(15deg);
       opacity: 1;
      }
     100%{
        transform: rotate(30deg);
        opacity:1;
    }
}

.page8.active{
   .page8-img1,.page8-img2,.page8-img3{
     animation:page8-img 1.5s linear 1s infinite normal forwards;
       
   }
}
